<template>
  <div class="echarts-container">
    <div id="echarts-main"></div>
  </div>
</template>

<script>

import * as echarts from 'echarts'
// import { getSimpleData } from '@/api/echartapi'
import { getSimpleData } from "@/api/echartapi"
export default {
  data() {
    this.myChart = null
    return {}
  },
  methods: {
    drawEcharts(datalist) {
      // 绘制图表
      this.myChart.setOption({
        // 用于显示echarts图表的title
        title: {
          text: 'ECharts 入门示例',
        },
        // 鼠标滑动展示信息
        tooltip: {
          trigger: 'axis',
        },
        // 横轴展示的数据，格式是一个数据
        xAxis: {
          data: datalist.map((item) => item.x),
        },
        // 一般不用设置，会根据数据自动设置
        yAxis: {},
        // 工具箱的设置
        toolbox: {
          feature: {
            // 图形缩放功能
            dataZoom: {
              yAxisIndex: 'none',
            },
            // 数据窗口的功能
            dataView: { readOnly: false },
            // 图形类型切换的功能
            magicType: {
              type: ['line', 'bar'],
            },
            // 重置功能
            restore: {},
            // 图表保存为图片功能
            saveAsImage: {},
          },
        },
        // 控制某个系列数据的展示
        legend: {
          data: ['饼图', '销量', '价格'],
        },
        series: [
          {
            name: '饼图',
            type: 'pie',
            radius: [50, 250], // 数组的第一项是内半径，第二项是外半径。
            center: ['50%', '50%'], // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
            roseType: 'area', // 是否展示成南丁格尔图，通过半径区分数据大小。
            // 用于指定饼图扇形区块的内外圆角半径，支持设置固定数值或者相对于扇形区块的半径的百分比值
            itemStyle: {
              borderRadius: 8,
            },
            data: datalist.map((item, index) => {
              return { value: item.val, name: 'rose' + index }
            }),
          },
          {
            name: '销量', // 一系列数据的名字
            type: 'line', // 数据展示的类型： 柱状图、折线图、饼图
            data: datalist.map((item) => item.val), // 要展示的数据集合（系列）
          },
          {
            name: '价格',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20, 36],
          },
        ],
      })
    },
    getData() {
      getSimpleData().then((res) => {
        this.drawEcharts(res.data)
      })
    },
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.getElementById('echarts-main'))
    this.getData()
  },
}
</script>

<style lang="scss" scoped>
.echarts-container {
  width: 100%;
  height: 100%;
  position: relative;

  #echarts-main {
    width: 600px;
    height: 600px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>